import React, { Component } from 'react';
import { WhiteSpace, List, InputItem, Toast } from 'antd-mobile';
import { withRouter } from 'react-router-dom';
import YwxNavBar from '../../components/common/YwxNavBar/YwxNavBar';
import YwxButton from '../../components/common/YwxButton/YwxButton';

class Forget extends Component {


    constructor(props) {
        super(props);
        this.state = {
            confirmPassword: '',
            different: false,
            time: 60,
            isGetCodeLoading: false,
            formData: {
                name: '',
                phone: '',
                password: '',
                code: ''
            }
        }

        this.getCode = React.$utils.throttle(this.getCode, 2000);
        this.submit = React.$utils.throttle(this.submit, 2000);
    };

    phoneChange = (value) => {
        this.setState({
            formData: {
                ...this.state.formData,
                phone: value
            }
        });
    };
    passwordChange = (value) => {
        this.setState({
            formData: {
                ...this.state.formData,
                password: value
            }
        });
    };
    confirmPasswordChange = (value) => {
        this.setState({
            confirmPassword: value
        });
    };
    confirmPasswordBlur = () => {
        if (this.state.confirmPassword !== this.state.formData.password) {
            this.setState({
                different: true
            });
        } else {
            this.setState({
                different: false
            });
        }
    };
    codeChange = (value) => {
        this.setState({
            formData: {
                ...this.state.formData,
                code: value
            }
        });
    };
    getCode = () => {
        let phone = this.state.formData.phone;
        phone = phone.replace(/\s/g, '');
        let result = React.$utils.validatePhone(phone);
        if (!result) {
            Toast.fail('请输入正确的手机号')
            return false
        }

        React.$utils.request({
            url: '/api/sendSms',
            params: {
                phone
            }
        }).then(res => {
            this.setState({
                isGetCodeLoading: true
            });
            res.msg && Toast.success(res.msg);
            let timer = setInterval(() => {
                if (this.state.time <= 0) {
                    this.setState({
                        time: 60,
                        isGetCodeLoading: false
                    });
                    clearInterval(timer)
                } else {
                    this.setState({
                        time: this.state.time - 1
                    })
                }
            }, 1000)
        })
    };

    validate = (callback) => {
        let {
            formData,
            confirmPassword
        } = this.state;
        let {
            phone,
            password,
            code
        } = formData;
        phone = phone.replace(/\s/g, '');

        let msg = '';
        if (!React.$utils.validatePhone(phone)) {
            console.log(123)
            msg = '请输入正确的手机号';
        } else if (!password) {
            msg = '请输入密码';
        } else if (password !== confirmPassword) {
            msg = '两次密码不一致';
        } else if (!code) {
            msg = '请输入验证码'
        }

        if (msg) {
            Toast.fail(msg)
        } else {
            callback && callback();
        }
    }

    submit = () => {
        this.validate(() => {
            let {
                phone,
                password,
                code
            } = this.state.formData;
            phone = phone.replace(/\s/g, '');

            React.$utils.request({
                url: '/api/forget',
                method: 'put',
                data: {
                    phone,
                    password,
                    code,
                }
            }).then(res => {
                this.props.history.go(-1);
            })
        });
    }


    render() {

        const getCodeElement =
            this.state.isGetCodeLoading ?
                (<span onClick={this.getCode}>{this.state.time}s</span>) :
                (<span onClick={this.getCode}>获取验证码</span>)

        return (
            <div>
                <YwxNavBar>忘记密码</YwxNavBar>
                <WhiteSpace />
                <List>
                    <InputItem onChange={this.phoneChange} value={this.state.formData.phone} type='phone'>手机号码</InputItem>
                    <InputItem onChange={this.passwordChange} value={this.state.formData.password} type='password'>新密码</InputItem>
                    <InputItem onChange={this.confirmPasswordChange} value={this.state.confirmPassword} error={this.state.different} onBlur={this.confirmPasswordBlur} type='password' >确认密码</InputItem>
                    <InputItem onChange={this.codeChange} value={this.state.formData.code} type='digit' extra={getCodeElement}>验证码</InputItem>
                </List>
                <YwxButton onClick={this.submit} style={{ marginTop: '1rem' }}>确认修改</YwxButton>
            </div>
        );
    }
}
export default withRouter(Forget);

